<template>
  <div class="paycashierKeyBoard">
    <div :class="keyboardClass"></div>
  </div>
</template>

<script setup lang="ts" name="keyboardDigit">
import { verifyNumberIntegerAndFloat } from '@/utils/formatter'
import Keyboard from 'simple-keyboard'
import 'simple-keyboard/build/css/index.css'

// 声明props
const props = defineProps({
  keyboardClass: {
    default: 'digitKeyboardPayCashier',
    type: String
  },
  input: {
    default: '',
    type: String
  },
  keyboardType: {
    default: '',
    type: String
  }
})
const emit = defineEmits(['onChange', 'onKeyPress', 'onConfirm', 'onCancel'])
const keyboard = ref()
const layoutName = ref('default')
// 声明变量
const keyboardClass = ref(props.keyboardClass) //键盘样式
// const { input } = toRefs(props) //输入的值
const displayDefault = reactive({
  '{bksp}':
    '<svg width="32" height="32" style="display:flex" id="_图层_2" data-name="图层 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40"> <defs> <style> .cls-1 { clip-path: url(#clippath); } .cls-2 { fill: none; } </style> <clipPath id="clippath"> <rect class="cls-2" width="40" height="40"/> </clipPath> </defs> <g id="_图层_1-2" data-name="图层 1"> <g class="cls-1"> <g> <path d="M35.81,6.51H10.76c-.48,0-.88,.2-1.16,.58L.3,19.12c-.4,.49-.4,1.27,0,1.77l9.3,12.03c.28,.38,.69,.58,1.17,.58h25.05c2.31,0,4.19-1.88,4.19-4.19V10.69c0-2.31-1.88-4.19-4.19-4.19Zm1.27,4.19V29.31c0,.69-.58,1.27-1.27,1.27H11.45L3.3,20,11.45,9.42h24.36c.69,0,1.27,.58,1.27,1.27Z"/> <path d="M23.91,19.98l3.58-3.61c.28-.28,.43-.64,.43-1.02s-.15-.74-.43-1.02c-.56-.56-1.49-.56-2.05,0l-3.59,3.6-3.59-3.6c-.58-.58-1.46-.58-2.05,0-.28,.28-.43,.64-.43,1.02s.15,.74,.43,1.02l3.58,3.61-3.65,3.65c-.28,.28-.43,.64-.43,1.02s.15,.74,.44,1.02c.26,.26,.63,.4,1.06,.4s.8-.14,1.06-.4l3.59-3.62,3.6,3.62c.26,.26,.63,.4,1.06,.4,.38,0,.67-.1,1.06-.4,.28-.28,.43-.64,.43-1.02s-.15-.74-.43-1.02l-3.65-3.65Z"/> </g> </g> </g> </svg>',
  '{shift}': '123',
  '{change}': '英',
  '{clear}': '清空',
  '{confirm}': '确<br>认',
  '{cancel}': '取<br>消'
}) //按钮默认文字
// 声明方法

const onChange = (input: any) => {
  if (layoutName.value == 'cancel') {
    return
  }
  input = verifyNumberIntegerAndFloat(input)
  keyboard.value.setInput(input)
  emit('onChange', input)
}
const onKeyPress = (button: string) => {
  if (button === '{cancel}') return handleCancel()

  if (layoutName.value == 'cancel') {
    return
  }
  if (button === '{clear}') return handleClear()
  if (button === '{confirm}') return handleConfirm()

  emit('onKeyPress', button)
  /**
   * If you want to handle the shift and caps lock buttons
   */
}
const setKeyBoardLayout = (name: any) => {
  layoutName.value = name
  keyboard.value.setOptions({
    layoutName: name
  })
}
const initKeyboard = () => {
  console.log(keyboard.value)
  keyboard.value = new Keyboard(keyboardClass.value, {
    onChange: onChange,
    onKeyPress: onKeyPress,
    layout: {
      // 默认布局
      default: ['1 2 3 {bksp}', '4 5 6 {confirm}', '7 8 9 {none}', '0 . 00 {none}'],
      cancel: ['1 2 3 {bksp}', '4 5 6 {cancel}', '7 8 9 {none}', '0 . 00 {none}']
    },

    // 按钮展示文字
    display: displayDefault
  }) //键盘初始化
}

const handleClear = () => {
  keyboard.value.clearInput()
} //清空输入
const handleConfirm = () => {
  emit('onConfirm')
}
const handleCancel = () => {
  emit('onCancel')
}
//在子组件中暴露出handleClear方法
defineExpose({ handleClear, initKeyboard, setKeyBoardLayout })
// 监听input的变化
watch(
  () => props.input,
  () => {
    let input = verifyNumberIntegerAndFloat(props.input)

    if (keyboard.value) {
      keyboard.value.setInput(input)
    }
  },
  {
    immediate: true
  }
)

onMounted(() => {
  nextTick(() => {
    initKeyboard()
  })
})
onActivated(() => {})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.paycashierKeyBoard .hg-theme-default {
  // display: flex;
  height: 100%;
  padding: 10px 10px 0 10px;
  border-radius: 0px;
  background-color: var(--app-content-bg-color);

  width: 470px;

  // width: 100%;
  .hg-rows {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;

    .hg-row {
      flex: 1;
      display: flex;
      justify-content: center;
      margin-bottom: 10px;

      border: none;

      &:nth-last-child(2) {
        position: absolute;
        bottom: 80px;

        //.hg-button {
        // &:nth-last-child(3) {
        //  padding-bottom: 20px;
        // }
        // }
      }

      &:last-child {
        position: absolute;
        bottom: 0;

        // .hg-button {
        //   &:nth-last-child(3) {
        //     padding-bottom: 20px;
        //   }
        // }
      }

      .hg-button {
        width: 105px !important;
        height: 70px !important;
        color: #000;
        border-radius: 4px;
        box-shadow: none !important;
        font-size: 32px;

        &:not(:last-child) {
          margin-right: 10px;
        }
      }

      .hg-button-confirm {
        height: 230px !important;
        background: var(--el-color-primary);
        color: #fff;
        border-bottom: none;

        &:active {
          background-color: var(--el-color-primary);
          opacity: 0.8;
        }
      }

      .hg-button-cancel {
        // height: 150px !important;
        height: 230px !important;

        background: red;
        color: #fff;
        border-bottom: none;

        &:active {
          background-color: red;
          opacity: 0.8;
        }
      }

      .hg-button-none {
        display: none;
      }

      .hg-button-clear {
        display: none;
      }
    }
  }
}
</style>
